<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>全球疫情地图</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <script th:src="@{/echarts/echarts.min.js}"></script>
    <script th:src="@{/echarts/china.js}"></script>
    <script th:src="@{/echarts/world.js}"></script>
    <script th:src="@{/echarts/jquery-1.11.1.min.js}"></script>
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}" media="all">
    <script th:src="@{/layui/layui.js}" charset="utf-8"></script>
</head>
<body class="childrenBody">
    <div>
        <!-- 内容主体区域 -->
        <div style="padding-top: 15px;">
            <div id="main" style="width: 1000px;height:600px;"></div>
        </div>
    </div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));

        // 指定图表的配置项和数据
        var dataList = [];
        var option = {
            title : {
                text: '世界地图实例',
                subtext: '世界地图实例',
                sublink : '',
                x:'center',
                y:'top'
            },
            tooltip : {
                trigger: 'item',
                formatter : function (params) {
                    var value = (params.value + '').split('.');
                    value = value[0].replace(/(\d{1,3})(?=(?:\d{3})+(?!\d))/g, '$1,') + '人';
                    return params.seriesName + '<br/>' + params.name + ' : ' + value;
                }
            },
            toolbox: {
                show : true,
                orient : 'vertical',
                x: 'right',
                y: 'center',
                feature : {
                    mark : {show: true},
                    dataView : {show: true, readOnly: false},
                    restore : {show: true},
                    saveAsImage : {show: true}
                }
            },
            dataRange: {
                min: 0,
                max: 1000000,
                text:['High','Low'],
                realtime: false,
                calculable : true,
                color: ['#C8E8FF','#7ec4ff','#34A0FF']
            }
        };


        $.ajax({
            url: "/api/queryGlobalMap",
            method: "GET",
            dataType: "JSON",
            success: function (data) {
                for (let i in data.data){
                    dataList[i] = data.data[i];
                }
                myChart.setOption({
                    series : [
                        {
                            name: '全球疫情地图数据',
                            type: 'map',
                            mapType: 'world',
                            roam: true,
                            mapLocation: {
                            y : 60
                            },
                            itemStyle:{
                                emphasis:{label:{show:true}},
                                areaColor: '#7ec4ff',
                                borderColor: '#FFFFFF',
                                borderWidth: 0.5,
                            },
                            data: dataList
                         }
                            ]
                })
            }
        })
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>
</body>
</html>